<!--
  *  目录 树形选择组件
  *
  * @Author:    1024创新实验室-主任：卓大
  * @Date:      2022-08-12 21:01:52
  * @Wechat:    zhuda1024
  * @Email:     lab1024@163.com
  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012
  *
-->
<template>
  <a-tree-select
    v-model:value="selectValue"
    :style="`width:${width}`"
    :dropdown-style="{ maxHeight: '400px', overflowX: 'auto' }"
    :tree-data="categoryTreeData"
    :field-names="{
      children: 'children',
      label: 'cate_name',
      key: 'id',
      value: 'id'
    }"
    :multiple="multiple ? 'multiple' : undefined"
    treeNodeFilterProp="cate_name"
    show-search
    :placeholder="placeholder"
    :dropdownMatchSelectWidth="false"
    :allowClear="true"
    @change="onChange"
  />
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue'
import { searchApi } from '@/api/search/search-api'
import { errorSentry } from '@/lib/error-sentry'
import { message } from 'ant-design-vue'
const props = defineProps({
  value: Number,
  placeholder: {
    type: String,
    default: '请选择'
  },
  width: {
    type: String,
    default: '100%'
  },
  // 新增：控制是否多选
  multiple: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:value', 'change'])

// -----------------  查询 目录 数据 -----------------
const categoryTreeData = ref([])
async function queryCategoryTree() {
  try {
    let param = {
      // categoryType: props.categoryType,
    }
    let resp = await searchApi.cateList(param)
    categoryTreeData.value = resp.data
  } catch (e) {
    message.error(e.msg)
    errorSentry.captureError(e)
  }
}

// -----------------  选中相关监听、事件 -----------------
const selectValue = ref(props.value)
// 箭头value变化
watch(
  () => props.value,
  (newValue) => {
    selectValue.value = newValue
  }
)

function onChange(value) {
  emit('update:value', value)
  emit('change', value)
}

onMounted(queryCategoryTree)
</script>
